<template>
  <mars-dialog
    title="应急服务详情"
    customClass="base-pannel"
    width="330"
    top="100"
    left="15"
    height="80%"
  >
    <div class="form-container">
      <div class="form-card">

        <div class="form-group">
          <label class="form-label">服务片区</label>
          <span class="form-value">{{ yingjifuwu.fwpq || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">应急单位名称</label>
          <span class="form-value">{{ yingjifuwu.yjdwmc || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">法定代表人</label>
          <span class="form-value">{{ yingjifuwu.fr || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">联系电话</label>
          <span class="form-value">{{ yingjifuwu.frTel || '未提供' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">经营地址</label>
          <span class="form-value">{{ yingjifuwu.jydz || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">服务乡镇</label>
          <span class="form-value">{{ yingjifuwu.fwxz || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">两用为农服务中心</label>
          <span class="form-value">{{ yingjifuwu.lyfwzx || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">农机应急服务队</label>
          <span class="form-value">{{ yingjifuwu.njyjfwd || '未指定' }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">技术服务人员数量</label>
          <span class="form-value">{{ yingjifuwu.jsrysl || 0 }}</span>
        </div>
        <div class="form-group">
          <label class="form-label">机械（台）套</label>
          <span class="form-value">{{ yingjifuwu.jx || '未提供' }}</span>
        </div>
      </div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
// 脚本部分保持不变
import { ref, onMounted } from "vue"
import * as mapWork from "../header/map"



const yingjifuwu = mapWork.NJstation

onMounted(() => {})
</script>

<style lang="less">
// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

// 透明对话框样式
.mars-dialog {
  .mars-dialog__content {
    background-color: transparent;
    padding: 0;
  }
}

.transparent-dialog {
  .mars-dialog__header {
    background-color: transparent;
    border-bottom: none;
  }
  .mars-dialog__footer {
    background-color: transparent;
    border-top: none;
  }
}

// 表单容器样式（占满对话框）
.form-container {
  width: 100%;
  height: 100%;
  padding: 10px; /* 对话框内边距 */
}

.form-card {
  background-color: transparent;
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px; /* 表单内边距 */

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    z-index: -1;
  }
}

.form-group {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.form-label {
  flex: 0 0 120px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}

.form-value {
  flex: 1;
  color: #fff;
  font-size: 14px;
  word-break: break-all;
}

// 对话框头部样式
.mars-dialog .mars-dialog__header {
  background-image: url("/img/panel-header1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px; /* 调整头部高度 */

  .mars-dialog__title {
    color: #fff;
    margin-left: 15px;
    line-height: 50px; /* 垂直居中 */
  }

  .mars-dialog__close {
    color: #fff;
    line-height: 50px; /* 垂直居中 */
  }
}
</style>
